<p class="text-lg flex items-center gap-2">
  File Naming Patterns
  <i
    class="pi pi-info-circle text-sky-600"
    pTooltip="Define custom naming patterns for uploaded files and for moving files within your library. Use metadata placeholders to automate organization."
    tooltipPosition="right"
    style="cursor: pointer;">
  </i>
</p>

<div class="flex flex-col space-y-6 p-4 m-4 custom-border">

  <div>
    <h2 class="mb-3 text-lg">Enter Upload File Naming Pattern:</h2>
    <p class="mb-3 text-sm text-gray-400">
      Define how newly uploaded files are named and organized using book metadata.
    </p>
    <div class="flex gap-4 items-center">
      <input type="text" [(ngModel)]="uploadPattern" class="p-inputtext w-[700px]" placeholder="e.g., {title} - {authors}" (input)="onUploadPatternChange(uploadPattern)"/>
      <p-button label="Save" (onClick)="savePatterns()" severity="primary" outlined="true" [disabled]="!!uploadErrorMessage || !!moveErrorMessage"></p-button>
    </div>
    @if (uploadErrorMessage) {
      <div class="text-red-500 mt-1">{{ uploadErrorMessage }}</div>
    }

    <h3 class="mt-4 mb-2">Upload Pattern Preview:</h3>
    <p class="text-lg text-green-500">{{ generateUploadPreview() }}</p>
  </div>

  <div>
    <h2 class="mb-3 text-lg">Enter File Move Naming Pattern:</h2>
    <p class="mb-3 text-sm text-gray-400">
      Specify how book files should be renamed and relocated using metadata such as title, authors, or series. This pattern is applied when using the Move Files feature.
    </p>
    <div class="flex gap-4 items-center">
      <input type="text" [(ngModel)]="movePattern" class="p-inputtext w-[700px]" placeholder="e.g., {authors}/<{series}/><{seriesIndex}. >{title} - {authors}< ({year})>.pdf"
             (input)="onMovePatternChange(movePattern)"/>
      <p-button label="Save" (onClick)="savePatterns()" severity="primary" outlined="true" [disabled]="!!uploadErrorMessage || !!moveErrorMessage"></p-button>
    </div>
    @if (moveErrorMessage) {
      <div class="text-red-500 mt-1">{{ moveErrorMessage }}</div>
    }

    <h3 class="mt-4 mb-2">Move Pattern Preview:</h3>
    <p class="text-lg text-green-500">{{ generateMovePreview() }}</p>

    <p-divider></p-divider>

    <p class="pt-4">Available Placeholders:</p>

    <p class="text-sm text-gray-400 mb-2 mt-2">
      Use placeholders to dynamically insert book metadata into file names and folder paths. These will be replaced with actual values when uploading or moving files.
      You can also wrap parts of the pattern in <code>{{ '{{<...>}' }}</code> to make them optional, if any placeholder inside is missing, that section will be omitted entirely.
    </p>

    <div class="mt-2">
      <div class="mx-4 my-2 flex flex-wrap gap-4">
        <ul class="list-disc pl-4 min-w-[250px] text-gray-300">
          <li><code class="text-orange-400">{{ '{title}' }}</code> – Book title</li>
          <li><code class="text-orange-400">{{ '{authors}' }}</code> – Author(s)</li>
          <li><code class="text-orange-400">{{ '{year}' }}</code> – Full year (e.g. 2025)</li>
          <li><code class="text-orange-400">{{ '{series}' }}</code> – Series name</li>
          <li><code class="text-orange-400">{{ '{seriesIndex}' }}</code> – Series index (e.g. 01)</li>
          <li><code class="text-orange-400">{{ '{language}' }}</code> – Language code (e.g. en)</li>
          <li><code class="text-orange-400">{{ '{publisher}' }}</code> – Publisher name</li>
          <li><code class="text-orange-400">{{ '{isbn}' }}</code> – ISBN number</li>
          <li><code class="text-orange-400">{{ '{currentFilename}' }}</code> Original file name (with extension)</li>
        </ul>

        <p-divider layout="vertical"></p-divider>

        <div class="text-sm p-3 min-w-[250px]">
          <p class="mb-1 font-bold text-gray-200 text">Optional blocks</p>
          <p class="text-gray-300">
            Surround parts of your pattern with angle brackets
            <code class="text-blue-400">{{ '{<...>}' }}</code>
            to make them optional. <br> If any placeholder inside the block has no value, the whole block is excluded.
          </p>
          <p class="mt-2 font-semibold text-gray-300">Example:</p>
          <p><code>{{ '{<{seriesIndex} - >{title}' }}</code></p>
          <p class="pl-4 mt-1 text-gray-300">• <code>01 - Dune</code> (if <code>{{ '{seriesIndex}' }}</code> exists)</p>
          <p class="pl-4 text-gray-300">• <code>Dune</code> (if <code>{{ '{seriesIndex}' }}</code> is missing)</p>
        </div>
      </div>
    </div>

    <p-divider></p-divider>

    <div class="mt-6">
      <p class="mb-4">Example Patterns & Output:</p>

      <div class="px-4 text-sm space-y-4">
        <p class="text-base font-semibold text-gray-200 mt-6 mb-2">Examples with Full Metadata</p>
        <p class="text-gray-400 mb-4">
          <span class="block">title: <code>Harry Potter and the Sorcerer's Stone</code></span>
          <span class="block">authors: <code>J.K. Rowling</code></span>
          <span class="block">series: <code>Harry Potter</code></span>
          <span class="block">seriesIndex: <code>01</code></span>
          <span class="block">year: <code>1997</code></span>
          <span class="block">currentFilename: <code>harry1_original.epub</code></span>
        </p>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Basic pattern:</strong><code class="text-gray-400"> {{ '{authors} - {title}' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> J.K. Rowling - Harry Potter and the Sorcerer's Stone.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Pattern with punctuation:</strong><code class="text-gray-400"> {{ '{title}: {series}' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> Harry Potter and the Sorcerer's Stone: Harry Potter.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Series in folder path:</strong><code class="text-gray-400"> {{ '{authors}/{series}/{seriesIndex} - {title}' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> J.K. Rowling/Harry Potter/01 - Harry Potter and the Sorcerer's Stone.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Folder only:</strong><code class="text-gray-400"> {{ '{title}/' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> /Harry Potter and the Sorcerer's Stone/harry1_original.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Absolute path:</strong><code class="text-gray-400"> {{ '/{authors}/{title}' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> /J.K. Rowling/Harry Potter and the Sorcerer's Stone.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Reuse original filename in path:</strong><code class="text-gray-400"> {{ '{authors}/{series}/{currentFilename}' }}</code>
          </p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> J.K. Rowling/Harry Potter/harry1_original.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Preserve original filename only:</strong><code class="text-gray-400"> {{ '{currentFilename}' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> harry1_original.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Empty pattern (defaults to current filename):</strong><code class="text-gray-400"> {{ '' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> harry1_original.epub</code></p>
        </div>
      </div>

      <div class="px-4 text-sm space-y-4 mt-10">
        <p class="text-base font-semibold text-gray-200 mb-2">Examples with Missing Optional Fields</p>
        <p class="text-gray-400 mb-4">
          <span class="block">title: <code>Project Hail Mary</code></span>
          <span class="block">authors: <code>Andy Weir</code></span>
          <span class="block">year: <code>2021</code></span>
          <span class="block">series: <code>(not provided)</code></span>
          <span class="block">seriesIndex: <code>(not provided)</code></span>
          <span class="block">currentFilename: <code>project_hail_mary_final.epub</code></span>
        </p>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Pattern with optional blocks:</strong><code
            class="text-gray-400"> {{ '{authors}/<{series}/><{seriesIndex}. >{title}< ({year})>' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> Andy Weir/Project Hail Mary (2021).epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Fallback with seriesIndex and dash:</strong><code
            class="text-gray-400"> {{ '<{seriesIndex}. >{title}< - {authors}>' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> Project Hail Mary - Andy Weir.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Brackets & punctuation fallback:</strong><code class="text-gray-400"> {{ '<[{series}] >{title} - {authors}' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> Project Hail Mary - Andy Weir.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Series + punctuation fallback:</strong><code class="text-gray-400"> {{ '<{series}: >{title} by {authors}' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> Project Hail Mary by Andy Weir.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Only folders, no filename:</strong><code class="text-gray-400"> {{ '{authors}/' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> Andy Weir/project_hail_mary_final.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Deep nested folders:</strong><code class="text-gray-400"> {{ '{authors}/books/<{series}/>{title}/' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> Andy Weir/books/Project Hail Mary/project_hail_mary_final.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">With static folder prefix:</strong><code class="text-gray-400"> {{ 'Books/<{series}/>{authors} - {title}' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> Books/Andy Weir - Project Hail Mary.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Use original filename in path:</strong><code
            class="text-gray-400"> {{ '{authors}/books/<{series}/>{currentFilename}' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> Andy Weir/books/project_hail_mary_final.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Prefix current filename manually:</strong><code class="text-gray-400"> {{ '{authors}/final__{currentFilename}' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> Andy Weir/final__project_hail_mary_final.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Filename preserved, renamed folder:</strong><code class="text-gray-400"> {{ '{title}/source/{currentFilename}' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> Project Hail Mary/source/project_hail_mary_final.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Use current filename with year suffix:</strong><code
            class="text-gray-400"> {{ '{authors}/{year}__{currentFilename}' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> Andy Weir/2021__project_hail_mary_final.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Fallback with optional + extras folder:</strong><code
            class="text-gray-400"> {{ '<{series}/>{authors}/extras/{currentFilename}' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> Andy Weir/extras/project_hail_mary_final.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Archive structure using original name:</strong><code
            class="text-gray-400"> {{ 'archive/<{series}/>{year}/{currentFilename}' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> archive/2021/project_hail_mary_final.epub</code></p>
        </div>

        <div>
          <p class="mb-1"><strong class="text-gray-300">Structured folder + renamed file:</strong><code
            class="text-gray-400"> {{ '{authors}/<{series}/>{title} ({year}) by {authors}' }}</code></p>
          <p><strong class="text-gray-300">Output:</strong><code class="text-gray-400"> Andy Weir/Project Hail Mary (2021) by Andy Weir.epub</code></p>
        </div>
      </div>
    </div>
  </div>
</div>
